<template>
  <vxe-pulldown ref="xDown" id="pullDown" transfer destroy-on-close>
    <template #default>
      <a-input placeholder="Basic usage" @change="keyupEvent"/>
      <!--      <vxe-input-->
      <!--        v-model="inputValue"-->
      <!--        placeholder="请选择父级"-->
      <!--        @keyup="keyupEvent"-->
      <!--        @focus="focusEvent"-->
      <!--        @suffix-click="suffixClick"></vxe-input>-->
    </template>
    <template #dropdown>
      <div class="my-dropdown">
        <vxe-grid
          border
          highlight-hover-row
          auto-resize
          height="auto"
          size="mini"
          row-key
          show-overflow="tooltip"
          :loading="loading"
          :data="tableData"
          :columns="tableColumn"
          :tree-config="treeConfig"
          @cell-click="cellClickEvent">
        </vxe-grid>
      </div>
    </template>
  </vxe-pulldown>
</template>

<script>
import { permissionList } from '@/api/system'
import { debounce } from 'lodash'

export default {
  name: 'PullDownTabled',
  data () {
    // 格式化显示
    const formatterType = ({ cellValue }) => {
      const item = this.typeList.find(item => item.value === cellValue)
      return item ? item.label : ''
    }
    return {
      treeConfig: {
        reserve: true,
        transform: true,
        expandAll: true,
        line: true,
        rowField: 'id',
        parentField: 'parentId'
      },
      inputValue: '',
      loading: false,
      tableData: [],
      tableList: [],
      tableColumn: [
        { field: 'id', title: 'id', width: 55 },
        { field: 'name', title: '资源名称', treeNode: true, width: 190 },
        { field: 'type', title: '资源类型', formatter: formatterType }
      ],
      typeList: [
        {
          label: '目录',
          value: 0
        },
        {
          label: '菜单',
          value: 1
        },
        {
          label: '按钮/API',
          value: 2
        }
      ]
    }
  },
  created () {
    this.getPermissionList()
    this.keyupEvent()
  },
  methods: {
    focusEvent () {
      this.$refs.xDown.showPanel()
    },
    getPermissionList () {
      permissionList().then((res) => {
        console.log(res)
        const { data, code } = res.data
        if (code === 200) {
          this.tableList = data
        }
      })
    },
    keyupEvent () {
      debounce(this.$refs.xDown.showPanel(), 300)
      const { inputValue } = this
      this.loading = true
      setTimeout(() => {
        this.loading = false
        if (inputValue) {
          this.tableData = this.tableList.filter(row => row.name.indexOf(inputValue) > -1)
        } else {
          this.tableData = this.tableList.slice(0)
        }
      }, 100)
    },
    suffixClick () {
      this.$refs.xDown.togglePanel()
    },
    cellClickEvent ({ row }) {
      this.$emit('inputValue', row.id)
      this.inputValue = row.name
      this.$refs.xDown.hidePanel()
    }
  }
}
</script>

<style lang='less'>
  #pullDown {
    width: 100%;
  }
  .my-dropdown {
    //width: 700px;
    height: 300px;
    background-color: #fff;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  }
</style>
